@import '~styles/settings.scss';
$mobile-padding: rem(40px);
$desktop-padding: rem(50px);
$mobile-margin: rem(10px);

.c-modal-meta {
  .modal-content {
    padding-top: 0;
  }

  @media screen and (min-width: $screen-m) {
    width: auto;
  }

  .modal-meta-content {
    padding-top: 0;
    min-height: rem(320px);
    width: 100%;
    max-width: rem(800px);
    color: $slate;

    @media screen and (min-width: $screen-m) {
      min-width: rem(320px);
      padding-top: 0;
    }

    p {
      margin-bottom: rem(10px);

      a {
        color: $green-gfw;

        &:hover {
          color: darken($green-gfw, 10%);
        }
      }
    }

    .ext-actions {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      border-top: solid 1px $border;
      margin: 0 rem(-30px) rem(-20px);
      margin-left: rem(-25px);
      width: calc(100% + (2 * #{rem(25px)}));
      padding: rem(20px) rem(30px) rem(10px);

      > a {
        margin: 0 rem(10px);
        margin-bottom: rem(10px);
      }

      @media screen and (min-width: $screen-m) {
        margin: 0 rem(-30px) rem(-30px);
        margin-left: -$horizontal-modal-padding-desktop;
        width: calc(100% + (2 * #{$horizontal-modal-padding-desktop}));
        padding: rem(20px) rem(50px) 0;
        flex-direction: row;
      }
    }

    .subtitle {
      margin-top: rem(5px);
      margin-bottom: rem(20px);
      font-size: rem(13px);
      line-height: 1.2;
      color: $warm-grey;

      @media screen and (min-width: $screen-m) {
        margin-bottom: $vertical-modal-padding-desktop;
      }
    }

    .meta-table {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      border-top: solid 1px $border;
      margin-bottom: rem(30px);

      @media screen and (min-width: $screen-m) {
        margin-bottom: rem(30px);
      }
    }

    .table-row {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      border-bottom: solid 1px $border;
      width: 100%;

      @media screen and (min-width: $screen-m) {
        flex-direction: row;
      }

      &:nth-child(even) {
        background-color: $grey-light;
      }

      .title-column {
        font-weight: 500;
        font-size: rem(11px);
        text-transform: uppercase;
        padding: rem(15px) rem(5px) rem(2px) rem(25px);
        color: $slate;
        width: rem(150px);

        @media screen and (min-width: $screen-m) {
          padding: rem(15px) $horizontal-modal-padding-desktop;
          padding-right: rem(5px);
        }
      }

      .description-column {
        font-weight: 300;
        font-size: rem(13px);
        line-height: 1.5;
        color: $slate;
        width: calc(100% - 100px);
        width: 100%;
        padding: 0 rem(25px) rem(15px) rem(25px);
        word-break: break-word;

        @media screen and (min-width: $screen-m) {
          padding: rem(13px) $horizontal-modal-padding-desktop rem(3px);
        }

        p {
          margin-bottom: rem(10px);
        }
      }
    }

    .overview {
      margin-bottom: rem(30px);

      h4 {
        font-size: rem(16px);
        font-weight: 500;
        margin-bottom: rem(10px);
      }

      .body {
        font-size: rem(13px);
        font-weight: 300;
      }
    }

    .citation {
      margin-bottom: rem(30px);
      padding: 0;
      word-break: break-word;

      h5 {
        font-size: rem(12px);
        font-weight: 500;
        margin-bottom: rem(10px);
      }

      .body {
        font-size: rem(12px);
        color: #aaa;
        font-weight: 300;
      }
    }

    ul,
    ol {
      list-style: disc;
      margin-left: rem(15px);
    }
  }
}
